<template>
	<view class="com-content">
		<view class="com-box" :style="{'height':height + 'rpx',backgroundColor:bgcolor}">
			<!--头部样式一 logo选择-->
			<view class="com-top" v-if="topType==='one'?true:false"
				:style="{padding:topType==='one'?'0 30rpx':'0 30rpx 0 0'}">
				<!--logo-->
				<view class="com-box-l" @tap.stop="itemClick(show)">
					<view class="com-box-l-sel">
						<image class="logo" :src="obj.logo_img"></image>
						<view class="com-box-l-sel-r">
							<view class="name">{{obj.title}}<text class="logo-statu" v-if="obj.statu"></text></view>
							<text class="icons icon-gengduo" :style="{'transform': show?'rotate(90deg)':'rotate(0)'}"></text>
						</view>
					</view>
				</view>
				<view class="com-box-r" v-if="is_r_i">
					<view class="com-box-r-icon" @click.stop="tosearch">
						<image style="width: 34rpx;height: 34rpx;" :src="$mAssetsPath.icon_search"></image>
					</view>
					<view class="com-box-r-icon" @click.stop="toadd">
						<image style="width: 33rpx;height: 33rpx;" :src="$mAssetsPath.icon_add"></image>
					</view>
				</view>
			</view>
			<!--头部样式二-->
			<view class="com-top2" v-if="topType==='two'?true:false">
				<view class="com-box-l">
					<view class="com-box-l-icon" @tap.stop="back">
						<uni-icons :color="color" :type="leftIcon" :size="iconfont" />
					</view>
					<view class="com-box-l-serch" v-if="cenType==='search'?true:false">
						<uni-search-bar radius="17" placeholder="搜索" clearButton="auto" cancelButton="none"
							@confirm="search" />
					</view>
					<view class="com-box-l-title" v-else-if="cenType==='title'?true:false">
						<view v-if="popType==='one'">{{cenTit}}</view>
						<view v-else-if="popType==='two'">
							<view v-if="!foldshow">{{cenTit}}</view>
							<view v-else-if="foldshow">{{popType==='one'?cenTit:'筛选'}}</view>
						</view>
					</view>
				</view>
				<view class="com-box-r" v-if="rType==='icon' || rType==='txt' ? true : false">
					<!--右侧图标 一个-->
					<template v-if="r_icon_num==='one'">
						<template v-if="popType==='one'">
							<view class="com-box-r-icon" v-if="rType==='icon'?true:false" @tap.stop="itemClick(show)">
								<image style="width: 28rpx;height: 32rpx;" :src="$mAssetsPath.icon_shaixuan"></image>
							</view>
						</template>
						<!--数据统计-道具详细-筛选按钮-->
						<template v-else-if="popType==='two'">
							<view class="com-box-r-icon" v-if="rType==='icon'?true:false"
								@tap.stop="itemClick2(foldshow)">
								<image style="width: 28rpx;height: 32rpx;" :src="$mAssetsPath.icon_shaixuan"></image>
							</view>
						</template>
					</template>
					<!--右侧图标 两个-->
					<template v-else-if="r_icon_num==='two'">
						<view class="com-box-r-icon" v-if="rType==='icon'?true:false" @tap.stop="itemClickT">
							<image style="width: 28rpx;height: 32rpx;" :src="$mAssetsPath.icon_add"></image>
						</view>
						<view class="com-box-r-icon" v-if="rType==='icon'?true:false" @tap.stop="itemClick(show)">
							<image style="width: 28rpx;height: 32rpx;" :src="$mAssetsPath.icon_shaixuan"></image>
						</view>
					</template>
					<!--右侧文字-->
					<view class="com-box-r-txt" v-if="rType==='txt'?true:false" @tap.stop="itemClick(show)">
						<view class="com-box-r-t">{{rightTxt}}</view>
					</view>
				</view>
			</view>
			<!--头部样式三-->
			<view class="com-top3" v-if="topType==='three'?true:false" :style="{padding:topType==='three'?'0 30rpx 0 0':'0'}">
				<!--导航-->
				<view class="longTab">
					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation
						:scroll-left="tabLeft">
						<view 
						class="longItem" 
						:style="{width:+isWidth+'px', 'font-size':index===tabClick?afontS+'rpx':fontS+'rpx','font-weight':index===tabClick?'600':'400',color:index===tabClick?'#198FFF':'#333'}" 
						:data-index="index"
						:class="index===tabClick?'click':''" v-for="(item,index) in tabTitle" 
						:key="index" :id="'id'+index"
						@click="longClick(index)">
						{{item}}
						</view>
						<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
							<view class="underline"></view>
						</view>
					</scroll-view>
				</view>
				
				<view class="com-box-r" v-if="is_r_i">
					<view class="com-box-r-icon" @click.stop="tosearch">
						<image style="width: 34rpx;height: 34rpx;" :src="$mAssetsPath.icon_search"></image>
					</view>
					<view class="com-box-r-icon" @click.stop="toadd">
						<image style="width: 33rpx;height: 33rpx;" :src="$mAssetsPath.icon_add"></image>
					</view>
				</view>
			</view>
			<!--头部样式四-->
			<view class="com-top" v-if="topType==='four'?true:false"
				:style="{padding:topType==='four'?'0 30rpx 0 0':'0'}">
				<!--logo-->
				<view class="com-box-l4">
					<view class="com-box-l-icon" @tap.stop="back">
						<uni-icons :color="color" :type="leftIcon" :size="iconfont" />
					</view>
					<view class="four_nav">
						<view class="nav-item" @click="handleActive(1)"
							:class="[active === 1 ? 'active' : active === 2 ? '':'']">
							POP
						</view>
						<view class="nav-item" @click="handleActive(2)"
							:class="[active === 1 ? '' : active === 2 ? 'active':'']">
							道具
						</view>

					</view>
				</view>
			</view>

			<!--下拉选项列表一-->
			<view class="com-dowm" v-if="topType==='one'?true:false"
				:style="{'bottom':'-' + (itemHeight*maxDropdownLength) + 'rpx','height':(itemHeight*maxDropdownLength) + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':itemTextColor}"
						v-for="(item,index) in itemArr" :key="index" @tap.stop="subItemClick(index)">
						<view class="dropdown-li">
							<image class="logo" :src="item.logo_img"></image>
							<view class="name">{{item.title}}
								<view class="logo-statu" v-if="item.statu">{{item.num}}</view>
							</view>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
		<!--下拉选项列表二-->
		<view class="com-dowm2" v-if="topType==='two'?true:false"
			:style="{top:system.bar+'rpx',height:popHeight + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}">
			<template v-if="pageobj.type=='radio'">
				<view class="filter">
					<scroll-view class="menu-box" :scroll-y="true">
						<view class="box" v-for="(box,box_index) in pageobj.submenu" :key="box_index">
							<view class="title" v-if="box.submenu.length>0">{{box.name}}</view>
							<view class="labels">
								<view class="label" v-if="" style="margin-right:10rpx"
									:style="{width:lable_width + 'px',height:label_height+'rpx'}"
									v-for="(label,label_index) in box.submenu" :key="label_index"
									@click="selectRadioLabel(box_index,label_index,label.selected)" :class="{'on':label.selected}">
									{{label.name}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="btn-box">
						<view class="reset" @tap="resetFilterData">重置</view>
						<view class="submit" @tap="setFilterData">确定</view>
					</view>
				</view>
			</template>
		</view>
		<!--数据统计-下拉筛选-下拉选项列表三-->
		<view class="com-dowm4" v-if="topType==='two'?true:false"
			:style="{top:system.bar+'rpx',height:system.h + 'px','opacity':foldshow?'1':'0','display':foldshow?'block':'none'}">
			<view class="filter">
				<scroll-view class="menu-box" :style="{height:system.main + 'px'}" :scroll-y="true">
					<!--折叠面板-->
					<uni-collapse ref="add" class="uni-collapse-box warp" @change="change">
						<uni-collapse-item v-for="(item, index) in pageobj.submenu" :key="index" :open="item.open"
							:show-animation="item.showAnimation" :title="item.name">
							<!--折叠内容-->
							<view class="uni-collapse-content">
								<block v-for="(ite,ind) in item.submenu" :key="ind">
									<!--二级-折叠内容-->
									<view class="uni-collapse-content-li" v-if="ite.type===1">
										<view class="uni-collapse-content-li-l2">
											<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{ite.name}}
										</view>
										<block v-for="(it,i) in ite.submenu" :key="i">
											<view class="uni-collapse-content-li-li"
												@click.stop="changecheck2(item.id, ite.id, it.id, it.checked)">
												<view class="item-li-l">
													<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{it.name}}
												</view>
												<!--radio-选择-->
												<view class="item-li-r">
													<image class="icon-check"
														:src="it.checked?$mAssetsPath.icon_check_on:$mAssetsPath.icon_check">
													</image>
												</view>
											</view>
										</block>
									</view>
									<!--一级-折叠内容-->
									<view class="uni-collapse-content-li" v-else-if="ite.type===2">
										<view class="uni-collapse-content-li-l"
											@click.stop="changecheck(item.id,ite.id,ite.checked)">
											<view class="item-li-l">
												<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{ite.name}}
											</view>
											<!--radio-选择-->
											<view class="item-li-r">
												<image class="icon-check"
													:src="ite.checked?$mAssetsPath.icon_check_on:$mAssetsPath.icon_check">
												</image>
											</view>
										</view>
									</view>
								</block>
							</view>
						</uni-collapse-item>
					</uni-collapse>

				</scroll-view>
				<view class="btn-box">
					<view class="reset" @tap="preview(previewshow)">预览<text class="num">{{count}}</text></view>
					<view class="submit" @tap="previewconfirm()">确定</view>
				</view>
			</view>
		</view>
		<!--下拉tip框-->
		<view class="com-dowm3" :style="{'opacity':tipshow?'1':'0','display':tipshow?'block':'none'}">
			<view class="sanjiaoxing">
				<view class="sjx"></view>
			</view>
			<view class="w-con" :style="{backgroundColor:bgcolor}">
				<view class="w-con-box" @click="tolink('a')">
					<image class="box-icon" :src="$mAssetsPath.icon_yqgr"></image>
					<view class="box-txt">邀请个人</view>
				</view>
				<view class="w-con-box" @click="tolink('b')">
					<image class="box-icon" :src="$mAssetsPath.icon_txlyq"></image>
					<view class="box-txt">通讯录邀请</view>
				</view>
				<view class="w-con-box" @click="tolink('c')">
					<image class="box-icon" :src="$mAssetsPath.icon_bjxz"></image>
					<view class="box-txt">编辑公司</view>
				</view>
				<view class="w-con-box" @click="tolink('d')">
					<image class="box-icon" :src="$mAssetsPath.icon_bjgys"></image>
					<view class="box-txt">编辑供应商</view>
				</view>
			</view>
		</view>
		<!--预览下拉框 -->
		<u-popup class="popup-content" mode='bottom' border-radius="16" v-model="previewshow">
			<view class="header">
				<view class="title">已选择关联分解:</view>
			</view>
			<scroll-view class="body" scroll-y="true">
				<block v-for="(item,index) in pageobj.submenu" :key="index">
					
						<!--折叠内容-->
						<view class="uni-collapse-content" v-if="item.checked===true">
							<view class="uni-collapse-content-tit">{{item.name}}</view>
							<block v-for="(ite,ind) in item.submenu" :key="ind">
								<!--二级-折叠内容-->
								<view class="uni-collapse-content-li" v-if="ite.type===1 && ite.checked===true">
									<view class="uni-collapse-content-li-l2">
										<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{ite.name}}
									</view>
									<block v-for="(it,i) in ite.submenu" :key="i">
										<view class="uni-collapse-content-li-li" v-if="it.checked===true">
											<view class="item-li-l">
												<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{it.name}}
											</view>
											<!--radio-选择-->
											<view class="item-li-r">
												<image class="icon-check"
													:src="it.checked?$mAssetsPath.icon_check_on:$mAssetsPath.icon_check">
												</image>
											</view>
										</view>
									</block>
								</view>
								<!--一级-折叠内容-->
								<view class="uni-collapse-content-li" v-else-if="ite.type===2 && ite.checked===true">
									<view class="uni-collapse-content-li-l">
										<view class="item-li-l">
											<image class="icon-l" :src="$mAssetsPath.icon_l"></image>{{ite.name}}
										</view>
										<!--radio-选择-->
										<view class="item-li-r">
											<image class="icon-check"
												:src="ite.checked?$mAssetsPath.icon_check_on:$mAssetsPath.icon_check">
											</image>
										</view>
									</view>
								</view>
							</block>
						</view>
					
				</block>
			</scroll-view>
			<view class="btn-box">
				<view class="reset" @tap="preview(previewshow)">预览<text class="num">{{count}}</text></view>
				<view class="submit" @tap="previewconfirm()">确定</view>
			</view>
		</u-popup>
		<view class="bg-mask" :class="[show?'bg-mask-show':'']" @tap="maskClose" @touchmove="touchControl"></view>
		<view class="bg-mask" :class="[tipshow?'bg-mask-show2':'']" @tap="maskClose" @touchmove="touchControl"></view>
		<view class="bg-mask3" :class="[foldshow?'bg-mask-show3':'']" @tap="maskClose" @touchmove="touchControl"></view>
	</view>
</template>

<script>
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue"; //折叠面板
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item2.vue"; //折叠面板
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'; //搜索
	export default {
		name: 'sel-logo',
		components: {
			uniCollapse,
			uniCollapseItem,
			uniIcons,
			uniSearchBar
		},
		props: {
			tabTitle:{
				type:Array,
				default:() =>{
					return ['公司','供应商']
				}
			},
			fontS:{
				type:String,
				default:'32'
			},
			afontS:{
				type:String,
				default:'36'
			},
			fontW:{
				type:String,
				default:'400'
			},
			//筛选框类型
			popType: {
				type: String,
				default: "one"
			},
			//右侧图标数量
			r_icon_num: {
				type: String,
				default: "one"
			},
			//是否开启右上角 提示弹窗
			is_tip: false,
			topType: {
				type: String,
				default: "one"
			},
			color: {
				type: String,
				default: "#595757"
			},
			leftIcon: {
				type: String,
				default: "arrowleft"
			},
			iconfont: {
				type: String,
				default: "24"
			},
			is_r_i: {
				type: Boolean,
				default: false
			},
			//中间样式
			cenType: {
				type: String,
				default: "search"
			},
			//右边样式
			rType: {
				type: String,
				default: "icon"
			},
			//中间标题
			cenTit: {
				type: String,
				default: ""
			},
			//右边文字
			rightTxt: {
				type: String,
				default: ""
			},
			// 是否要滑动关闭
			isTouchPrevent: {
				type: Boolean,
				default: true
			},
			// 下拉单项高度
			itemHeight: {
				type: Number,
				default: 90
			},
			// 能否遮罩关闭
			maskTouch: {
				type: Boolean,
				default: true
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: '#fff'
			},
			// 筛选条高度 （rpx）
			height: {
				type: Number,
				default: 90
			},
			// item数量超过多少开始滚动
			maxItemCount: {
				type: Number,
				default: 5
			},
			pageobj: {
				type: Object,
				default () {
					return {
						name: '单选',
						type: 'radio',
						submenu: [{
								name: "排序规则",
								submenu: [{
										name: "按时间先后",
										value: "1"
									},
									{
										name: "按统一发起人",
										value: "2"
									}
								]
							},
							{
								name: "下单类型",
								submenu: [{
										name: "全部",
										value: "1"
									},
									{
										name: "POP",
										value: "2"
									},
									{
										name: "道具",
										value: "3"
									}
								]
							}
						]
					}
				}
			},
			//下拉选项数组（二维数组）
			itemArr: {
				type: Array,
				default: () => {
					return [{
						logo_img: "/static/data-img/data-logo1.jpg",
						title: "耐克NIKE",
						statu: false,
						num: 1
					}, {
						logo: "/static/data-img/data-logo1.jpg",
						name: "阿迪达斯",
						statu: true,
						num: 2
					}, {
						logo: "/static/data-img/data-logo1.jpg",
						name: "乔丹",
						statu: false,
						num: 2
					}]
				}
			},
			// 选项左偏移
			itemPadding: {
				type: Number,
				default: 52
			},
			//下拉窗高度
			popHeight: {
				type: String,
				default: "450"
			},
			//下拉字号
			itemFontSize: {
				type: Number,
				default: 28
			},
			// 下拉文字颜色
			itemTextColor: {
				type: String,
				default: '#666'
			},
			// 是否需要选择后替换标题
			isNeedChangeTitle: {
				type: Boolean,
				default: true
			},
			//列数
			col_num: {
				type: Number,
				default: 3
			},
			//筛选项的高度
			label_height: {
				type: String,
				default: '68'
			},
			//是否默认返回
			is_back: {
				type: Boolean,
				default: true
			},
			//是否默认返回首页
			is_back_index: {
				type: Boolean,
				default: false
			},
			obj: {
				type: Object,
				default: () => {
					return {
						logo_img: "",
						title: "",
						statu: false
					}
				}
			},
		},
		computed: {
			maxDropdownLength() {
				return this.itemArr.length > this.maxItemCount ? this.maxItemCount : this.itemArr.length
			},
			lable_width() {
				return (this.system.w - (30 + this.col_num * 5)) / this.col_num;
			},
			//预览统计数据
			count() {
				let counts = 0
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach(item => {
						if (item && item.length > 0) {
							item.forEach(item2 => {
								if (item2.type === 1) {
									if (item2.submenu && item2.submenu.length > 0) {
										item2.submenu.forEach(item3 => {
											if (item3.checked === true) {
												counts += 1
											}
										})
									}
								} else if (item2.type === 2) {
									if (item2.checked === true) {
										counts += 1
									}
								}
							})
						}
					})
				}
				return counts
			}
		},
		created() {
			this.getSystem()
		},
		data() {
			return {
				previewshow:false,//预览
				show: false,
				tipshow: false,
				foldshow: false, //折叠筛选框
				currentSubIndex: 0,
				system: {
					w: 0,
					h: 0,
					scale: 1,
					systemScale: 1,
					bar:0,
					main: 0
				},
				active: 1,
				list:[],
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0
			}
		},
		mounted() {
			//this.obj = [...new Set(this.itemArr[this.currentSubIndex])]
		},
		methods: {
			// 导航栏点击
			longClick(index) {
				if (this.tabTitle.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.tabClick = index; //设置导航点击了哪一个
				this.isLeft = index * this.isWidth; //设置下划线位置
				this.$emit('changeTab', index); //设置swiper的第几页
				// this.$parent.currentTab = index //设置swiper的第几页
			},
			//预览
			preview(previewshow){
				this.previewshow = !previewshow;
			},
			//确定
			previewconfirm(){
				this.foldshow = false;
				this.previewshow = false;
				this.$emit("previewconfirm")
			},
			//一级复选框
			changecheck(id1, id2, checked) {
				this.$emit("changecheck", id1, id2, checked)
			},
			//二级复选框
			changecheck2(id1, id2, id3, checked) {
				this.$emit("changecheck2", id1, id2, id3, checked)
			},
			//折叠面板
			change(e) {

			},
			//弹窗跳转
			tolink(type) {
				this.$emit("tolink", type)
			},
			//点击导航
			handleActive(e) {
				let _self = this;
				_self.active = e;
				this.$emit("handleActive", e)
			},
			//跳转搜索页面
			tosearch() {
				this.$emit("tosearch")
			},
			//
			toadd() {
				this.$emit("toadd")
				if (this.is_tip) {
					this.tipshow = !this.tipshow
				}
			},
			/**
			 * @description: 获取设备信息
			 * @param {type} 
			 * @return {type} 
			 * @author: hch
			 */
			getSystem() {
				let _self = this
				let iconwidth = 80;
				
				uni.getSystemInfo().then(res => {
					console.log(111, res)
					let system = res[1]
					this.system.scale = 667 / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
					this.system.systemScale = system.windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
					this.system.w = system.windowWidth;
					this.system.h = system.windowHeight - system.statusBarHeight;
					this.system.bar = system.statusBarHeight/(uni.upx2px(100)/100);;
					this.system.main = system.windowHeight - system.statusBarHeight - 90;
					
					if (_self.tabTitle.length <= 5) {
						_self.isWidth = 150 / _self.tabTitle.length //宽度除以导航标题个数=一个导航所占宽度	
					} else {
						_self.isWidth = (system.windowWidth - iconwidth) / 5
					}
					console.log(1113,_self.isWidth)
				})

			},
			//选中单选类label-UI状态
			selectRadioLabel(box_index, label_index, selected) {
				/* let activeIndex = this.pageobj.submenu[box_index].submenu[label_index].name;
				console.log(123, activeIndex)
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach((item, index) => {
						if (index === box_index) {
							if (item.submenu && item.submenu.length > 0) {
								item.submenu.forEach(item2 => {
									//this.$set(item2, 'selected', false)
									if (item2.name === activeIndex) {
										item2.selected = !item2.selected
									}
								})
							}
						}
					})
				}
				this.$forceUpdate(); */
				this.$emit("selectRadioLabel",box_index, label_index,selected);
			},
			//重置
			resetFilterData() {
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach((item, index) => {
							if (item.submenu && item.submenu.length > 0) {
								item.submenu.forEach(item2 => {
										item2.selected = false
								})
							}
					})
				}
				//this.$emit("resetFilterData");
				//this.show = false
			},
			//确认
			setFilterData() {
				this.$emit("setFilterData");
				this.show = false
			},
			back() {
				if (this.is_back) {
					if(!this.is_back_index){
						uni.navigateBack({
							delta: 1
						})
					}else{
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				} else {
					this.$emit("back");
				}
				//this.$emit("back")
			},
			search(value) {
				this.$emit("search", value)
			},
			//右侧点击 图标2点击
			itemClick(show) {
				this.show = !show
			},
			//右侧点击 图标2点击
			itemClick2(foldshow) {
				this.foldshow = !foldshow
			},
			//右侧点击 图标1点击
			itemClickT() {
				this.$emit("itemClickT")
			},
			maskClose() {
				if (!this.maskTouch) return
				this.show = false
				this.tipshow = false
				this.foldshow = false
			},
			touchControl() {
				if (this.isTouchPrevent) {
					this.maskClose()
				}
			},
			subItemClick(index) {
				this.$emit('subItemClick', index)
				/* this.currentSubIndex = index;
				if (this.isNeedChangeTitle) {
					this.obj = this.itemArr[this.currentSubIndex]
				} */
				/* this.$emit('finish', {
					'$index': this.currentIndex,
					...this.itemArr[this.currentSubIndex]
				}) */
				this.show = false
			},

		}
	}
</script>

<style lang="scss">
	/* 下拉窗口 */
	.popup-content {
		display: flex;
		flex-direction: column;
	
		.header {
			display: flex;
			border-bottom: 1rpx solid #f5f5f5;
			height: 100rpx;
	
			.title {
				line-height: 100rpx;
				padding: 0 30rpx;
				text-align: left;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
		.btn-box {
			width: 100%;
			height: 90rpx;
			display: flex;
			flex-shrink: 0;
			flex-direction: row !important;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 90rpx;
			color: $font-color-w;
		
			.reset {
				position: relative;
				text-align: center;
				flex: 3;
				background: #eee;
				color: $font-color-9;
		
				.num {
					position: absolute;
					top: 14rpx;
					height: 32rpx;
					width: 32rpx;
					text-align: center;
					border-radius: 16rpx;
					background: $uni-bg-color-red;
					font-size: 20rpx;
					color: $font-color-w;
					line-height: 30rpx;
					font-weight: 400;
				}
			}
		
			.submit {
				text-align: center;
				flex: 7;
				background-color: #198FFF;
			}
		}
	
		.body {
			display: flex;
			max-height: 700rpx;
			flex-direction: column;
			
			.uni-collapse-content {
				display: flex;
				flex-direction: column;
				font-size: 32rpx;
				font-weight: 400;
				color: $font-color-3;
				border-bottom: 10rpx solid #f5f5f5;
				.uni-collapse-content-tit{
					line-height: 100rpx;
					border-bottom: 1rpx solid #f5f5f5;
					padding: 0 30rpx;
				}
			
				.uni-collapse-content-li {
					line-height: 100rpx;
			
					.uni-collapse-content-li-li {
						display: flex;
						justify-content: space-between;
						align-items: center;
						line-height: 100rpx;
						border-bottom: 1rpx solid #f5f5f5;
			
						.item-li-l {
							display: flex;
							align-items: center;
			
							.icon-l {
								margin-left: 90rpx;
								width: 20rpx;
								height: 40rpx;
								padding-bottom: 16rpx;
								margin-right: 16rpx;
							}
						}
			
						.item-li-r {
							margin-right: 30rpx;
			
							.icon-check {
								width: 36rpx;
								height: 36rpx
							}
						}
					}
			
					.uni-collapse-content-li-l {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1rpx solid #f5f5f5;
			
						.item-li-l {
							display: flex;
							align-items: center;
			
							.icon-l {
								margin-left: 60rpx;
								width: 20rpx;
								height: 40rpx;
								padding-bottom: 16rpx;
								margin-right: 16rpx;
							}
						}
			
						.item-li-r {
							margin-right: 30rpx;
			
							.icon-check {
								width: 36rpx;
								height: 36rpx
							}
						}
					}
			
					.uni-collapse-content-li-l2 {
						display: flex;
						align-items: center;
						line-height: 100rpx;
						border-bottom: 1rpx solid #f5f5f5;
			
						.icon-l {
							margin-left: 60rpx;
							width: 20rpx;
							height: 40rpx;
							padding-bottom: 16rpx;
							margin-right: 16rpx;
						}
					}
				}
			}
			
			
	
			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 36rpx;
	
				.box-name {
					margin-right: 30rpx;
				}
	
				.box-icon {
					width: 34rpx;
	
					.box-icon-dagou {
						width: 34rpx;
						height: 28rpx;
					}
				}
			}
		}
	
		.footer {
			height: 100rpx;
			color: $font-color-r;
			font-size: 36rpx;
			text-align: center;
			line-height: 88rpx;
			background: $uni-bg-color;
			margin-right: 50rpx;
		}
	}
	.bg-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9998;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask3 {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f5f5f5;
		z-index: 9998;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.bg-mask-show2 {
		visibility: visible;
		opacity: 0.3;
	}

	.bg-mask-show3 {
		visibility: visible;
		opacity: 0.9;
	}

	.nav {
		width: 208rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		text-align: center;
		font-size: 32rpx;
		color: $font-color-3;
		font-weight: bold;

		.nav-item {
			flex: 1;
			position: relative;

			&::after {
				content: '';
				width: 0;
				height: 8rpx;
				background-color: $font-color-b3;
				border-radius: 4px;
				position: absolute;
				left: 50%;
				bottom: -18rpx;
				transform: translateX(-50%);
				transition: .3s;
			}

			&.active {
				font-size: 32rpx;
				font-weight: bold;
				color: $font-color-b3;

				&::after {
					width: 36rpx;
				}
			}

			.nav-item-num {
				position: absolute;
				right: 0;
				top: -6rpx;
				width: 32rpx;
				height: 32rpx;
				background: #FF5454;
				border-radius: 50%;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 30rpx;
				color: $font-color-w;
			}
		}
	}

	.four_nav {
		width: calc(100% - 300rpx);
		margin-left: 90rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		text-align: center;
		font-size: 32rpx;
		color: $font-color-3;
		font-weight: bold;

		.nav-item {
			flex: 1;
			position: relative;

			&::after {
				content: '';
				width: 0;
				height: 8rpx;
				background-color: $font-color-b3;
				border-radius: 4px;
				position: absolute;
				left: 50%;
				bottom: -18rpx;
				transform: translateX(-50%);
				transition: .3s;
			}

			&.active {
				font-size: 32rpx;
				font-weight: bold;
				color: $font-color-b3;

				&::after {
					width: 36rpx;
				}
			}

			.nav-item-num {
				position: absolute;
				right: 0;
				top: -6rpx;
				width: 32rpx;
				height: 32rpx;
				background: #FF5454;
				border-radius: 50%;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 30rpx;
				color: $font-color-w;
			}
		}
	}

	.com-content {
		display: flex;

		.com-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			display: flex;
			position: relative;
			z-index: 9999;
			padding: 14rpx 6rpx;
			.com-top3 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100vw;
				.longTab {
					display: flex;
					width: calc(100vw- 160rpx);
					.longItem {
						height: 82upx;
						display: inline-block;
						line-height: 82upx;
						text-align: center;
						position: relative;
					}
					.underlineBox {
						height: 3px;
						width: 20%;
						display: flex;
						align-content: center;
						justify-content: center;
						transition: .5s;
				
						.underline {
							width: 32upx;
							height: 8rpx;
							background: $uni-but-bg-color;
						}
					}
				}
				.com-box-r {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 160rpx;
				
					.com-box-r-icon {
						display: flex;
						flex-direction: row-reverse;
						width: 80rpx;
					}
				}
			}

			.com-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.com-box-l4 {
					display: flex;
					align-items: center;
					width: 100%;
				}

				.com-box-l {
					display: flex;
					align-items: center;
					width: calc(100% - 160rpx);

					.com-box-l-icon {
						width: 28px;
						height: 28px;
					}

					.com-box-l-serch {
						width: calc(100% - 27px);
					}

					.com-box-l-sel {
						display: flex;
						align-items: center;
						margin-right: 18rpx;

						.logo {
							width: 50rpx;
							height: 50rpx;
							margin-right: 18rpx;
						}
						.com-box-l-sel-r{
							display: flex;
							align-items: center;
							width: 250rpx;
							
							.name {
								position: relative;
								font-size: 40rpx;
								font-weight: bold;
								line-height: 50rpx;
								padding-right: 10rpx;
								color: $uni-text-color;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							
								.logo-statu {
									position: absolute;
									width: 20rpx;
									height: 20rpx;
									background: #FF5454;
									right: 0;
									top: 0;
									border-radius: 50%;
								}
							}
						}
					}
				}

				.com-box-r {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 160rpx;

					.com-box-r-icon {
						display: flex;
						flex-direction: row-reverse;
						width: 80rpx;
					}
				}
			}

			.com-top2 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.com-box-l {
					display: flex;
					align-items: center;
					width: calc(100% - 27px);

					.com-box-l-title {
						width: calc(100% - 160rpx);
						font-weight: 700;
						font-size: 32rpx;
						line-height: 30px;
						text-align: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding-left: 80rpx;
					}

					.com-box-l-icon {
						width: 28px;
						height: 28px;
					}

					.com-box-l-serch {
						width: calc(100% - 27px);
					}

					.com-box-l-sel {
						display: flex;
						align-items: center;
						margin-right: 18rpx;

						.logo {
							width: 50rpx;
							height: 50rpx;
							margin-right: 18rpx;
						}

						.name {
							position: relative;
							font-size: 40rpx;
							font-weight: bold;
							line-height: 50rpx;
							padding-right: 10rpx;
							color: $uni-text-color;

							.logo-statu {
								position: absolute;
								width: 20rpx;
								height: 20rpx;
								background: #FF5454;
								right: 0;
								top: 0;
								border-radius: 50%;
							}
						}
					}
				}

				.com-box-r {
					display: flex;
					justify-content: center;
					align-items: center;

					.com-box-r-icon {
						width: 27px;
					}
				}
			}

		}

		.com-box::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 1rpx;
			left: 0;
			z-index: 9999;
		}

		.com-dowm3 {
			width: 290rpx;
			position: absolute;
			right: 30rpx;
			z-index: 9999;
			// #ifdef H5
			top: 10rpx;
			// #endif
			// #ifndef H5
			top: 90rpx;
			// #endif
			overflow: hidden;
			transform: translate3d(0, 90rpx, 0);
			flex-direction: row;
			transition: transform .15s linear;
			background: rgba(0, 0, 0, 0);

			.sanjiaoxing {
				width: 100%;
				display: flex;
				flex-direction: row-reverse;

				.sjx {
					margin-right: 20rpx;
					width: 0;
					height: 0;
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					border-bottom: 8rpx solid #fff;
				}
			}


			.w-con {
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				font-weight: 400;
				border-bottom: 1rpx solid #f5f5f5;
				padding: 0 30rpx;

				.w-con-box {
					display: flex;
					align-items: center;
					height: 100rpx;
					border-bottom: 1rpx solid #f5f5f5;

					.box-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 30rpx;
					}

					.box-txt {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
					}
				}

				.w-con-box:last-of-type {
					border-bottom: none;
				}
			}
		}

		.com-dowm4 {
			width: 100%;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 9999;
			overflow: hidden;
			transform: translate3d(0, 90rpx, 0);
			flex-direction: row;
			transition: transform .15s linear;
			border-radius: 0 0 20rpx 20rpx;
			border-top: 1rpx solid #f5f5f5;
			background: $uni-bg-color-grey;

			.filter {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				.menu-box {
					width: 100%;
					flex-shrink: 1;

					.uni-collapse-content {
						border-top: 1rpx solid #f5f5f5;
						display: flex;
						flex-direction: column;
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;

						.uni-collapse-content-li {
							line-height: 100rpx;

							.uni-collapse-content-li-li {
								display: flex;
								justify-content: space-between;
								align-items: center;
								line-height: 100rpx;
								border-bottom: 1rpx solid #f5f5f5;

								.item-li-l {
									display: flex;
									align-items: center;

									.icon-l {
										margin-left: 90rpx;
										width: 20rpx;
										height: 40rpx;
										padding-bottom: 16rpx;
										margin-right: 16rpx;
									}
								}

								.item-li-r {
									margin-right: 30rpx;

									.icon-check {
										width: 36rpx;
										height: 36rpx
									}
								}
							}

							.uni-collapse-content-li-l {
								display: flex;
								align-items: center;
								justify-content: space-between;
								border-bottom: 1rpx solid #f5f5f5;

								.item-li-l {
									display: flex;
									align-items: center;

									.icon-l {
										margin-left: 60rpx;
										width: 20rpx;
										height: 40rpx;
										padding-bottom: 16rpx;
										margin-right: 16rpx;
									}
								}

								.item-li-r {
									margin-right: 30rpx;

									.icon-check {
										width: 36rpx;
										height: 36rpx
									}
								}
							}

							.uni-collapse-content-li-l2 {
								display: flex;
								align-items: center;
								line-height: 100rpx;
								border-bottom: 1rpx solid #f5f5f5;

								.icon-l {
									margin-left: 60rpx;
									width: 20rpx;
									height: 40rpx;
									padding-bottom: 16rpx;
									margin-right: 16rpx;
								}
							}
						}
					}
				}

				.btn-box {
					width: 100%;
					height: 90rpx;
					display: flex;
					flex-shrink: 0;
					flex-direction: row !important;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 90rpx;
					color: $font-color-w;

					.reset {
						position: relative;
						text-align: center;
						flex: 3;
						background: #eee;
						color: $font-color-9;

						.num {
							position: absolute;
							top: 14rpx;
							height: 32rpx;
							width: 32rpx;
							text-align: center;
							border-radius: 16rpx;
							background: $uni-bg-color-red;
							font-size: 20rpx;
							color: $font-color-w;
							line-height: 30rpx;
							font-weight: 400;
						}
					}

					.submit {
						text-align: center;
						flex: 7;
						background-color: #198FFF;
					}
				}
			}
		}

		.com-dowm2 {
			width: 100%;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 9999;
			//height: 450rpx;
			overflow: hidden;
			transform: translate3d(0, 90rpx, 0);
			//max-height: 450rpx;
			flex-direction: row;
			transition: transform .15s linear;
			border-radius: 0 0 20rpx 20rpx;

			.filter {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.menu-box {
					width: 100%;
					height: calc(100% - 90rpx);
					flex-shrink: 1;

					.box {
						padding: 20rpx 30rpx;
						width: 100%;
						display: flex;
						flex-direction: column;

						.title {
							width: 100%;
							font-size: 28rpx;
							font-weight: 400;
							color: $font-color-3;
						}

						.labels {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;

							.label {
								border-radius: 4rpx;
								background: #f5f5f5;
								margin-top: 16rpx;
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								font-weight: 400;
								line-height: 68rpx;
								color: $font-color-9;
							}

							.on {
								background: #CBE6FF !important;
								font-size: 28rpx;
								color: #198FFF !important;
							}
						}
					}
				}

				.btn-box {
					width: 100%;
					height: 90rpx;
					display: flex;
					flex-shrink: 0;
					flex-direction: row !important;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 90rpx;
					color: $font-color-w;

					.reset {
						text-align: center;
						flex: 3;
						background: #FE5252;
					}

					.submit {
						text-align: center;
						flex: 7;
						background-color: #198FFF;
					}
				}
			}
		}

		.com-dowm {
			width: 100%;
			position: absolute;
			left: 0;
			z-index: 9999;
			overflow: hidden;
			border-top: 1rpx solid #F2F4F5;

			.dropdown-item {
				width: 100%;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				font-size: 28rpx;
				color: $font-color-9;
				border-bottom: 1rpx solid #F2F4F5;



				.dropdown-li {
					display: flex;
					align-items: center;
					margin-right: 18rpx;

					.logo {
						width: 50rpx;
						height: 50rpx;
						margin-right: 18rpx;
					}

					.name {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 400;
						line-height: 44rpx;
						color: $uni-text-color;

						.logo-statu {
							margin-left: 20rpx;
							text-align: center;
							width: 16px;
							height: 16px;
							background: #FF5454;
							border-radius: 50%;
							font-size: 11px;
							font-weight: 400;
							line-height: 16px;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
